<!DOCTYPE html>
<html lang="cn">
<head>
	<!-- 我是崽崽  -->
	 <!-- 我是崽崽  -->
	<meta charset="UTF-8">
	<title>MusicPlayer</title>
	<link rel="stylesheet" href="./css/animate.min.css">
	<script src="./js/jquery-3.5.1.min.js"></script>
	<!-- I'm dongdong -->
	<style>
		*{
			transition: .3s;
			box-sizing: border-box;
			font-family: "Microsoft Yahei";
		}
		body{
			background-image: linear-gradient(to right,#a6c0fe,#f68084,#f68084,#a6c0fe);
			background-size: 200%;
			animation: colorflow 30000s alternate infinite linear;
		}
		.playcard{
			background-color: rgba(0,0,0,.4);
			height: 200px;
			width: 600px;
			border-radius: 15px;
			box-shadow: 4px 4px 12px 3px rgba(0,0,0,.1);
			position: absolute;
			top: calc(50% - 100px);
			left: calc(50% - 300px);
			transition: .3s;
		}
		.playcard:hover {
			box-shadow: 4px 4px 8px 3px rgba(0,0,0,.23);
			transform: translate(-1px,-1px);
		}
		#coverpng{
			position: relative;
			left: 27px;
			top:23px;
			height: 150px;
			width: 150px;
			border-radius: 150px;
			animation: rotate 20s infinite linear;
			animation-play-state: paused;
			overflow: hidden;
			border: 3px solid white;
		}
		#coverpng:hover{
			cursor: pointer;
		}
		.paused{
			animation-play-state: paused !important;
		}
		.running{
			animation-play-state: running !important;
		}
		.progressbar{
			width: 350px; /*！！！！这里是进度条的总长度！！！！！*/
			height: 8px;
			background-color: white;
			position: absolute;
			right: 35px;
			top: 85px;
			border-radius: 9px;
			overflow: visible;
		}
		.progressbar:hover{
			cursor: pointer;
		}
		.played{
			width: 0%;
			height: 100%;
			background-color: rgba(158,144,255,1.00);
			border-radius: 6px;
		}
		.hint{
			width: 45px;
			height: 15px;
			background-color: rgba(255,255,255,.9);
			position: absolute;
			top: -17px;
			border-radius: 15px;
			border-bottom-left-radius: 0px;
			text-align: center;
			line-height: 15px;
			font-size: 12px;
			color: rgba(0,0,0,.9);
			display: none;
			z-index: 50;
		}
		.timedir{
			width: 240px;
			height: 30px;
			position: absolute;
			left: 200px;
			top: 40px;
			color: white;
			line-height: 30px;
			text-align: center;
		}
		.pausebtn{
			width: 40px;
			height: 40px;
			border: 1px solid white;
			border-radius: 30px;
			position: absolute;
			bottom: 40px;
			right: 200px;
		}
		.pausebtn:hover{
			cursor: pointer;
		}
		.leftlr{
			position: absolute;
			top:calc(50% - 12px);
			left:calc(50% - 3px);
			border-left: 6px solid white;
			border-bottom: 6px solid white;
			border-top: 6px solid rgba(255,255,255,0);
			border-right: 6px solid rgba(255,255,255,0);
			border-radius: 3px;
			border-bottom-left-radius: 0px;
			width: 0px;
			height: 0px;
			transition: .4s;
		}
		.rightlr{
			transform: rotateX(180deg);
			top:calc(50% - 1px);
			transition: .5s;
		}
		.leftlp{
			position: absolute;
			top: calc(50% - 9px);
			left: calc(50% - 7px);
			border-left: 4px solid white;
			border-bottom: 18px solid white;
			border-top: 0px solid rgba(255,255,255,0);
			border-right: 0px solid rgba(255,255,255,0);
			transform: rotateX(180deg);
			transition: .4s;
		}
		.rightlp{
			transform: translateX(10px);
			transition: .5s;
		}
				
		@keyframes rotate {
			from{
				transform: rotateZ(0deg);
			}
			to{
				transform: rotateZ(360deg);
			}
		}
		
		@keyframes colorflow{
			from{
				background-position: 0px 0px;
			}
			to{
				background-position: 15000000px 0px;
			}
		}
	</style>
</head>
<body>
	
	<audio src="111.mp3"></audio>
	<div class="playcard animate__animated animate__jackInTheBox">
		<div id="coverpng">
			<img height="150px" src="https://i.loli.net/2020/08/13/OtaMVyreBxAY65g.png" alt="Cover Not Found">
		</div>
		<div class="progressbar">
			
			<div class="played"></div>
			<div class="hint"></div>
		</div>
		
		<div class="timedir">
			Time indicator :&nbsp;
			<span id="audiocurrenttime"></span>s&nbsp; /&nbsp; <span id="audioduration"></span>s
		</div>
		
		<div class="pausebtn">
			<div id="lefticon" class="leftlr"></div>
			<div id="righticon" class="leftlr rightlr"></div>
		</div>
		
	</div>
	
	<script>
		$(function() {
			var audio = $("audio")[0];
			var played = $(".played")[0];
			
			$("#audiocurrenttime").text(audio.currentTime);
			
			audio.currentTime = 0;       //测试开始时间
			
			var timer1 = setInterval(function() {
				$("#audiocurrenttime").text((audio.currentTime).toFixed(0));
				
				played.style.width = audio.currentTime / audio.duration * 100 + "%";
				
				$("#audioduration").text((audio.duration).toFixed(0));
				
				if((audio.currentTime).toFixed(0) == (audio.duration).toFixed(0)){
					toggleplaystates();
					audio.currentTime = 0;
				}
				
			},500);
			
			$("#audioduration").text((audio.duration).toFixed(0));
			
			$("#coverpng").click(toggleplaystates);
			
			$(".pausebtn").click(toggleplaystates);
			
			
			$(".progressbar")[0].onmousedown = function() {
				document.onmousemove = function(e) {
					audio.currentTime = (e.clientX - $(".progressbar").offset().left)/350 * audio.duration;
				}
				document.onmouseup = function() {
					document.onmousemove = null;
				}
			};
			
			
			$(".progressbar").click(function(e) {
				audio.currentTime = (e.clientX - $(".progressbar").offset().left)/350 * audio.duration;
			});
			
			$(".progressbar").mouseover(function() {
				$(".progressbar").mousemove(function(event) {//这里进度条可能不准，使用e.clientX - $("....").offset().left 可能会更好一些
					$(".hint").text(((event.clientX - $(".progressbar").offset().left)/350 * audio.duration).toFixed(0)+"s");
					$(".hint")[0].style.left = (event.clientX - $(".progressbar").offset().left).toFixed(0)+"px";
					$(".hint")[0].style.display="block";
				});
				this.onmouseout = function() {
					$(".hint")[0].style.display="none";
				}
			});
						
			console.log(window.outerHeight);
			console.log(window.outerWidth);
			
			function toggleplaystates() {
				if(audio.paused){
					audio.play();
					$("#coverpng")[0].className="running";
					$("#lefticon")[0].className="leftlp";
					$("#righticon")[0].className="leftlp rightlp";
				}else{
					audio.pause();
					$("#coverpng").removeClass("running");
					$("#coverpng")[0].classNames="paused";
					$("#lefticon")[0].className="leftlr";
					$("#righticon")[0].className="leftlr rightlr";
				}
			}
		})
	</script>
	
	<script count="20" src="./js/canvas.js"></script>
	
</body>
</html>